<template>
  <view>
    <view class="signup" v-for="(sign, index) in signList" :key="index" @click="jump(sign.id)">
      <view class="title">
        {{ sign.name }}
      </view>
      <view class="Simg">
        <image :src="sign.poster" mode="widthFix" />
      </view>
      <view class="detail">
        <view class="detail-com">
          <view class="detail-organ">
            <image src="@/static/My/company.png" mode="widthFix" class="comImg" />
            <text class="organizer-text">{{ sign.company }}</text>
          </view>
          <view>
            <text class="pnum-text">{{ sign.scale }}</text>
          </view>
        </view>
        <view class="detail-bot">
          <view class="bot">
            <text class="bot-text">{{ sign.status === '1' ? '进行中' : '已结束' }}</text>
          </view>
          <view class="bot-time">
            <image src="@/static/My/time.png" mode="widthFix" class="timeImg" />
            <view class="time-text">{{ dayjs(sign.end_time).format('YYYY/MM/DD') }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
const { signList } = defineProps({
  signList: {
    type: Array as () => SignupItem[],
  },
})
//活动进行中
type SignupItem = {
  id: string // 活动id
  name: string //活动标题
  poster: string //活动主视觉图片链接
  company: string //主办单位
  scale: string //参与人数
  end_time: string //活动时间
  status: string //活动状态
}

// 跳转到活动详情
const jump = (id: string) => {
  uni.navigateTo({
    url: `/pages/index/activity/detail/index?id=${id}`,
  })
}
</script>

<style scoped lang="scss">
.title {
  text-align: center;
  font-family: Alibaba PuHuiTi;
  font-weight: 900;
  font-size: 40rpx;
  color: #221815;
}

.signup {
  width: 100%;
  height: 100%;
  padding: 5%;
  margin: 3% auto;
  border-radius: 20rpx;
  box-sizing: border-box;
  background-color: white;
}

.Simg {
  width: 100%;

  image {
    width: 100%;
    border-radius: 20rpx;
    margin-top: 4%;
  }
}

.detail-com {
  display: flex;
  justify-content: space-between;
}

.pnum-text {
  width: 572rpx;
  font-family: FandolHei;
  font-weight: 400;
  font-size: 28rpx;
  color: #221815;
  line-height: 58rpx;
}

.detail-organ {
  display: flex;
  align-items: center;

  .comImg {
    width: 34rpx;
    height: 30rpx;
    margin-right: 10rpx;
  }
  .organizer-text {
    font-family: FandolHei;
    font-weight: 400;
    font-size: 28rpx;
    color: #221815;
    line-height: 58rpx;
  }
}

.bot-time {
  width: 30%;
  display: flex;
  align-items: center;
  .timeImg {
    width: 27rpx;
    height: 27rpx;
    margin-right: 10rpx;
    image {
      width: 27rpx;
      height: 27rpx;
    }
  }

  .time-text {
    width: 118rpx;
    font-family: FZHei-B01S;
    font-weight: 400;
    font-size: 28rpx;
    color: #221815;
    line-height: 58rpx;
  }
}

.detail-bot {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}

.bot {
  width: 22%;
  border-radius: 20rpx;
  background: linear-gradient(to right, #5db3e4, #88c4e6, #aadbe7);
}

.bot-text {
  width: 80rpx;
  height: 26rpx;
  font-family: Alibaba PuHuiTi;
  font-weight: 800;
  font-size: 28rpx;
  color: #ffffff;
  line-height: 58rpx;
  margin-left: 15%;
}
</style>
